$(".chart-types").change(function(){
	// alert( $(this).find(":selected").val() );
	$('.preview-box').html('')
	// printChart();
    $(".preview-box").append("<div id='preview-item' style='width:750px; height:300px;'></div>");
    var series = datajson;
    // function (ec) {
    var seriesItem =  series[0];

    var echartGrowthLegend = ['增幅', '增幅排名'];
    var echartTotalLegend = [];
    var echartTitle = seriesItem.name;
    var echartXaxis = [];
    var echartTotalData = [];
    var echartGrowthData = [];
    var echartGrowthRankData = [];

    var seriesDataItem = seriesItem.data;
    for(var i = 1; i < seriesDataItem.length; i++){
        echartXaxis.push(seriesDataItem[i].area);
        echartTotalLegend.push(seriesDataItem[i].area);
        echartTotalData.push({
            value: seriesDataItem[i].total, 
            name: seriesDataItem[i].area
        })
        echartGrowthData.push(seriesDataItem[i].growth);
        echartGrowthRankData.push(seriesDataItem[i].growthrank);
    }


    var optionTotal 
    optionTotal = {
        title : {
            text: echartTitle + '总量',
            x:'center',
            y: '20'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data: echartTotalLegend
        },
        toolbox: {
            show : false
        },
        calculable : true,
        series : [
            {
                name:'总量',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data: echartTotalData
            }
        ]
    };

    var optionGrowth 
    optionGrowth = {
        title : {
            text: echartTitle + '增幅',
            x: 'center',
            y: '30'
        },
        tooltip : {
            trigger: 'axis',
            formatter: function(params) {
                return params[0].name + '<br/>'
                       + params[0].seriesName + ' : ' + params[0].value + ' (%)<br/>'
                       + params[1].seriesName + ' : ' + -params[1].value;
            }
        },
        toolbox: {
            show : false
        },
        calculable : false,
        legend: {
            data: echartGrowthLegend
        },
        xAxis : [
            {
                type: 'category',
                axisLine : {
                    show: false
                },
                data: echartTotalLegend
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '增幅',
                axisLabel : {
                    formatter: '{value} %'
                }
            },
            {
                type : 'value',
                name : '增幅排名',
                axisLabel : {
                    formatter: function(v){
                        return - v;
                    }
                }
            }
        ],
        series : [
            {
                name:'增幅', 
                type:'bar', 
                barWidth: 20, 
                data: echartGrowthData
            },
            {
                name:'增幅排名', 
                yAxisIndex: 1,
                type:'line',
                data: (function(){
                    var len = echartGrowthRankData.length;
                    while( len-- ) {
                        echartGrowthRankData[len]  *= -1;
                    }
                    return echartGrowthRankData;
                })()
            }
        ]
    };

  
    
    var optionLine
    optionLine = {
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
        toolbox: {
            show : true
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'直接访问',
                type:'line',
                stack: '总量',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
                    
    }

    var optionDash
    optionDash = {
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            show : true
        },
        series : [
            {
                name:'业务指标',
                type:'gauge',
                startAngle: 180,
                endAngle: 0,
                center : ['50%', '90%'],    // 默认全局居中
                radius : 320,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 200
                    }
                },
                axisTick: {            // 坐标轴小标记
                    splitNumber: 10,   // 每份split细分多少段
                    length :12,        // 属性length控制线长
                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    formatter: function(v){
                        switch (v+''){
                            case '10': return '低';
                            case '50': return '中';
                            case '90': return '高';
                            default: return '';
                        }
                    },
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#fff',
                        fontSize: 15,
                        fontWeight: 'bolder'
                    }
                },
                pointer: {
                    width:50,
                    length: '90%',
                    color: 'rgba(255, 255, 255, 0.8)'
                },
                title : {
                    show : true,
                    offsetCenter: [0, '-60%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#fff',
                        fontSize: 30
                    }
                },
                detail : {
                    show : true,
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderWidth: 0,
                    borderColor: '#ccc',
                    width: 100,
                    height: 40,
                    offsetCenter: [0, -40],       // x, y，单位px
                    formatter:'{value}%',
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontSize : 50
                    }
                },
                data:[{value: 50, name: '完成率'}]
            }
        ]
    }

    var optionMap
    optionMap ={
        tooltip : {
            trigger: 'item',
            formatter: '{b}'
        },
        series : [
            {
                name: '中国',
                type: 'map',
                mapType: 'china',
                selectedMode : 'multiple',
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name:'江苏',selected:true}
                ]
            }
        ]
    }


    var chartItem = echarts.init(document.getElementById('preview-item'), 'macarons');

    if($(this).find(":selected").val() == 1){
        chartItem.setOption(optionLine);
    } else if($(this).find(":selected").val() == 2){
        chartItem.setOption(optionGrowth);
    } else if($(this).find(":selected").val() == 3){
        chartItem.setOption(optionTotal);
    } else if($(this).find(":selected").val() == 4){
        chartItem.setOption(optionDash);
    } else if($(this).find(":selected").val() == 5){
        chartItem.setOption(optionMap);
    } else{
        chartItem.setOption(optionLine);
    }
    

            // $(document).ready(function($) {
            //     for(key in series){
            //         $(".preview-box").append("<div class='item item-total' style='width:500px; height:300px;' id='seriesTotalItem"+ key +"'></div><div style='width:500px; height:300px;' class='item item-growth' id='seriesGrowthItem"+ key +"'></div>")

            //         var seriesItem;
            //         seriesItem =  series[key];

            //         var echartGrowthLegend = ['增幅', '增幅排名'];
            //         var echartTotalLegend = [];
            //         var echartTitle = seriesItem.name;
            //         var echartXaxis = [];
            //         var echartTotalData = [];
            //         var echartGrowthData = [];
            //         var echartGrowthRankData = [];

            //         var seriesDataItem = seriesItem.data;
            //         for(var i = 1; i < seriesDataItem.length; i++){
            //             echartXaxis.push(seriesDataItem[i].area);
            //             echartTotalLegend.push(seriesDataItem[i].area);
            //             echartTotalData.push({
            //                 value: seriesDataItem[i].total, 
            //                 name: seriesDataItem[i].area
            //             })
            //             echartGrowthData.push(seriesDataItem[i].growth);
            //             echartGrowthRankData.push(seriesDataItem[i].growthrank);
            //         }

                    



            //         // 基于准备好的dom，初始化echarts图表
            //         // var chartTotal = ec.init(document.getElementById('seriesTotalItem'+ key), 'macarons');

            //         // var chartGrowth = ec.init(document.getElementById('seriesGrowthItem'+ key), 'macarons');
                    
                    

                    
            //         var optionTotal 
            //         optionTotal = {
            //             title : {
            //                 text: echartTitle + '总量',
            //                 x:'center',
            //                 y: '20'
            //             },
            //             tooltip : {
            //                 trigger: 'item',
            //                 formatter: "{a} <br/>{b} : {c} ({d}%)"
            //             },
            //             legend: {
            //                 orient : 'vertical',
            //                 x : 'left',
            //                 data: echartTotalLegend
            //             },
            //             toolbox: {
            //                 show : false
            //             },
            //             calculable : true,
            //             series : [
            //                 {
            //                     name:'总量',
            //                     type:'pie',
            //                     radius : '55%',
            //                     center: ['50%', '60%'],
            //                     data: echartTotalData
            //                 }
            //             ]
            //         };
                    

            //         var chartTotal = echarts.init(document.getElementById('seriesTotalItem'+ key), 'macarons');
            //         chartTotal.setOption(optionTotal);


            //     }
            // });

            

        // }
})


